// User.vue的逻辑代码
export default {
  created() {
    this.getData();
  },

  data() {
    // 用户管理-添加用户-自定义校验规则【手机号码】
    const checkMobile = (rule, value, callback) => {
      // rule 规则对象  value 当前表单元素的值  callback 校验完毕后的回调函数
      // 成功 callback()  失败 callback(new Errror('错误信息'))  将来会显示在你的元素下
      // 定义自己的校验规则
      // 校验组件去调用这个函数  定义的规则符合校验组件的要求
      if (!/^1[356789]\d{9}$/.test(value)) {
        return callback(new Error("手机号格式不正确"));
      }
      callback();
    };
    return {
      // 获取用户列表得参数
      reqParams: {
        query: "", //搜索关键字
        pagenum: 1, //当前页码
        pagesize: 2 //每页显示数据条数
      },
      // 用户列表数据
      userList: [],
      total: 0,
      addDialogFormVisible: false,
      // 添加的表单数据
      addForm: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      // 校验规则，添加用户和修改用户信息
      rules: {
        username: [{ required: true, trigger: "blur", message: "用户名必填" }],
        password: [
          { required: true, trigger: "blur", message: "密码必填" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur"
          }
        ],
        email: [
          { required: true, trigger: "blur", message: "邮箱必填" },
          { type: "email", trigger: "blur", message: "邮箱格式不正确" }
        ],
        mobile: [
          { required: true, trigger: "blur", message: "手机号必填" },
          { validator: checkMobile, trigger: "blur" }
        ]
      },
      // 分配角色相关数据
      roleDialogFormVisible: false,
      roleUserName: "",
      roleName: "",
      roleUserId: "",
      roleList: [],
      // 被选中得角色，要进行修改
      roleSelected: "",
      //   编辑用户相关的数据
      editDialogFormVisible: false,
      editForm: {
        id: "",
        username: "",
        email: "",
        mobile: ""
      }
    };
  },
  methods: {
    // 1获取用户列表数据
    async getData() {
      const { data: dt } = await this.$http.get("users", {
        params: this.reqParams
      });
      // console.log(dt);
      // 错误判断
      if (dt.meta.status !== 200) return this.$message.error(dt.meta.msg);
      // // 修改data中的表格数据  驱动视图改变
      this.userList = dt.data.users;
      // // data.total 是总条数
      this.total = Math.ceil(dt.data.total / this.reqParams.pagesize);
    },
    // 2 分页功能实现
    pager(newPagenum) {
      this.reqParams.pagenum = newPagenum;
      this.getData();
    },
    // 3 搜索功能实现
    search() {
      this.getData();
    },
    // 4点击添加用户时候，打开弹出框,重置表单的数据
    openAddDialog() {
      this.addDialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.addFormRef.resetFields();
      });
    },
    // 5 添加用户功能，当点击确定时，触发
    addUser() {
      this.$refs.addFormRef.validate(async valid => {
        if (valid) {
          const {
            data: { meta }
          } = await this.$http.post("users", this.addForm);
          // console.log(meta);
          // console.log(data);
          if (meta.status !== 201) return this.$message.error(meta.msg);
          this.$message.success(meta.msg);
          this.addDialogFormVisible = false;
          this.reqParams.pagenum = 1;
          this.getData();
        }
      });
    },
    // 6 删除用户功能，携带id
    deluser(id) {
      this.$confirm("确定删除该用户吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const {
            data: { meta }
          } = await this.$http.delete(`users/${id}`);
          // 失败情况
          if (meta.status !== 200) return this.$message.error("删除用户失败");
          // 成功情况
          this.getData();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 7实现改变用户状态功能
    async toggleState(row) {
      const {
        data: { meta }
      } = await this.$http.put(`users/${row.id}/state/${row.mg_state}`);
      console.log(meta);
      if (meta.status !== 200) return this.$message.error("修改用户状态失败");
      this.$message.success("修改用户状态成功");
    },
    // 8点击角色分配按钮，打开弹出框，渲染数据,清空选项
    async openChangeRole(row) {
      const {
        data: { data, meta }
      } = await this.$http.get("roles");
      if (meta.status !== 200) return this.$message.error("获取角色列表失败");
      // 显示得数据
      this.roleUserName = row.username;
      this.roleName = row.role_name;
      // 下一个功能使用
      this.roleUserId = row.id;
      this.roleList = data;
      this.roleDialogFormVisible = true;
      this.roleSelected = "";
    },
    // 9角色分配的功能
    async changeRole() {
      const {
        data: { meta }
      } = await this.$http.put(`users/${this.roleUserId}/role`, {
        rid: this.roleSelected
      });
      if (meta.status !== 200) return this.$message.error("分配角色失败");
      // 成功
      this.$message.success("分配角色成功");
      this.getData();
      this.roleDialogFormVisible = false;
    },
    // 10 点击编辑按钮，打开弹出框,表单重置，进行数据渲染
    openEditDialog(row) {
      this.editDialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.editFormRef.resetFields();
        // 填充表单
        // 1. 获取数据 row
        // 2. 修改editForm
        this.editForm.id = row.id;
        this.editForm.username = row.username;
        this.editForm.email = row.email;
        this.editForm.mobile = row.mobile;
      });
    },
    // 11 实现编辑功能
    editUser() {
      this.$refs.editFormRef.validate(async valid => {
        if (valid) {
          const {
            data: { meta }
          } = await this.$http.put(`users/${this.editForm.id}`, {
            email: this.editForm.email,
            mobile: this.editForm.mobile
          });
          if (meta.status !== 200) return this.$message.error("编辑用户失败");
          this.$message.success("编辑用户成功");
          this.getData();
          this.editDialogFormVisible = false;
        }
      });
    }
  }
};
